import { Component } from 'react'
import { View } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import dayjs from "dayjs"

//组件
import { LgPopLayer } from '../../../../components/popLayer'
import LgButton from '../../../../components/button'
import { LgCalendar } from "../../../../components/calendar"
import { LgTabs, LgTab } from "../../../../components/tabs"
import PrTimeSelect from "../../personal/timeSelect"

interface IndexState {
  // chooseDate?:string
  // chooseTime?:string
  choTabNum:0|1
}

export default class PrPopCalendar extends Component<any, IndexState>{
  constructor(props) {
    super(props)
    this.state = {
      choTabNum:0
    }
    this.confirm1 = this.confirm1.bind(this)
    this.choTab = this.choTab.bind(this)
  }

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  confirm1(chooseDate,chooseTime) {
    // let chooseDate = this.state.chooseDate?this.state.chooseDate:dayjs().format("YYYY-M-D")
    // let chooseDate = this.props.chooseDate ? this.props.chooseDate : dayjs().format("YYYY-M-D")
    // let chooseTime = this.state.chooseTime?this.state.chooseTime:"23:59:59"
    // let chooseTime = this.props.chooseTime ? this.props.chooseTime : "23:59:59"

    this.props.onConfirm(chooseDate, chooseTime)
  }
  choTab(i, o) {
    console.log("父组件：choTab", i, o);
    this.setState({
      choTabNum:i
    })
  }
  render() {
    let popCalendarType = this.props.popCalendarType
    let chooseDate,chooseTime
    if(!this.props.chooseDate){
      chooseDate = dayjs().format("YYYY-M-D")
    }else{
      chooseDate = this.props.chooseDate
    }

    if(!this.props.chooseTime){
      if(popCalendarType == 1){
        chooseTime = dayjs().format("HH:mm:ss")
      }else{
        chooseTime = "23:59:59"
      }
    }else{
      chooseTime = this.props.chooseTime
    }

    let choTabNum = this.state.choTabNum
    let dProps = {
      onDayChange: (value: string) => {
        this.props.onDayChange(value)
      },
      onMonthChange: (year: number, month: number) => {
        console.log(`month change to ${year}-${month}`)
      },
      minDay:dayjs().format("YYYY-MM-DD"),
      selectedDay: `${chooseDate}`
    }

    let timeSelectB = {
      // isOpen: bIsOpen,
      name: "创建时间",
      value: dayjs(`${chooseDate} ${chooseTime}`).format("HH:mm:ss"),
      onChange: (value: string) => {
        this.props.onTimeChange(value)
        // console.log(value)
        // this.setState({
        //   chooseTime:value
        // })
        // setCurrentTime(value)
        // setBIsOpen(false)
      },
      // onClose: () => {
      //     setBIsOpen(false)
      // }
    }

    return (
      <View className='PrPopCalendar'>
        <LgPopLayer
          isOpen={this.props.isOpen}
          showLayer={this.props.onClosePop}
          position="bottom"
          title={" "}
          showClose
          customContentClass="lg_Calendar_select_pop"
        >
          <LgTabs
            onClick={this.choTab}
            default={0}
          >
            <LgTab title="选择日期">
              {/* <View className='tab_Content'>
                <LgCalendar type="D" props={dProps}></LgCalendar>
              </View> */}
            </LgTab>
            <LgTab title="选择时间">
              {/* <View className='tab_Content'>
                <PrTimeSelect timeProps={timeSelectB}></PrTimeSelect>
              </View> */}
            </LgTab>
          </LgTabs>

          <View className='PrPopCalendar_Content'>
            <View className={`content_calendar ${choTabNum==0?"show":"hide"}`} >
              <LgCalendar type="D" props={dProps}></LgCalendar>
            </View>
            <View className={`content_timeSelect ${choTabNum==0?"hide":"show"}`}>
              <PrTimeSelect timeProps={timeSelectB}></PrTimeSelect>
            </View>
          </View>

          <View className='PrPopCalendar_btnBox'>
            <LgButton className='btn_confirm' type='B' onClick={()=>this.confirm1(chooseDate,chooseTime)}>确认</LgButton>
          </View>

        </LgPopLayer>
      </View>
    )
  }
}
